<template>
  <div>
    <div class="address-box">
      <h3>地址管理</h3>
      <router-link class="add" to="/member/addAddress" tag="div">
        <mt-button type="primary" size="large" plain>添加地址</mt-button>
      </router-link>
      <div class="address-list">
        <ul id="OA_task_1" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
          <li class="mui-table-view-cell mui-transitioning" v-for="item in this.addressList" :key="item.id">
            <div class="mui-slider-right mui-disabled">
              <a class="mui-btn mui-btn-blue">编辑</a>
              <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
              <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-10">
                  <span class="name">{{ item.name}}</span>
                  <span class="phone">{{ item.tel}}</span>
                  <p class="mui-h6 mui-ellipsis">{{ item.address }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressList:[
        {
          id:"001",
          name: "这条gai最靓的仔",
          tel: "16816868668",
          address: "广东省深圳市罗湖区",
          postcode: "580000"
        },
        {
          id:"002",
          name: "这条gai最美的妞",
          tel: "13145209999",
          address: "北京市海淀区",
          postcode: "100089"
        },
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.address-box {
  h3 {
    margin: 20px 20px;
  }
  .add {
    margin: 0 10px 20px;
  }

  .address-list {
    .mui-table-view {
      .mui-table-view-cell {
        .mui-slider-handle {
          .mui-table-cell {
            .phone {
              font-size: 12px;
              color: #8f8f94;
            }
            p {
              color: #000;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>

